<template>
  <div id="search">
    <div>
      <label for="">按分类查询 &nbsp;</label>
      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" @change="clearInput"></el-switch>
      <select :value="condition" ref="condition" :class="{display:value}">
        <option value="number">编号</option>
        <option value="name">名称</option>
        <option value="price">价格</option>
      </select>
      <select :value="classify" ref="classify" :class="{display:!value}" select>
        <option v-for="(item,index) in classifyIdList" :key="index" :value="item._id">{{item.name}}</option>
      </select>
      <input type="text" :value="inputInfor" ref="inputInfor"  :disabled="value" />
      <el-button icon="el-icon-search" circle @click="SearchStudents"></el-button>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState: mapStateGoods,
  mapMutations: mapMutationsGoods,
  mapActions: mapActionsGoods
} = createNamespacedHelpers("goods");
const {
  mapState: mapStateGoodsType,
  mapMutations: mapMutationsGoodsType,
  mapActions: mapActionsGoodsType
} = createNamespacedHelpers("goodsType");
export default {
  data() {
      return {
        value: true
      }
    },
  computed: {
    ...mapStateGoods(["condition", "inputInfor","classify"]),
    ...mapStateGoodsType(["classifyIdList"])
  },
  mounted(){
    this.getGoodsType()
  },
  watch: {
    inputInfor() {
      this.getGoods();
    },
    classify(){
      this.getGoods();
    }
  },
  methods: {
    ...mapMutationsGoods(["switchCondition", "switchInputInfor","switchclassify","clearInput"]),
    ...mapActionsGoods(["getGoods"]),
    ...mapActionsGoodsType(["getGoodsType"]),
    SearchStudents() {
      this.switchCondition(this.$refs.condition.value);
      this.switchInputInfor(this.$refs.inputInfor.value);
      this.switchclassify(this.$refs.classify.value);
    },
  }
};
</script>
<style scoped>
#search {
  width: 100%;
  margin-bottom: 5px;
  padding: 5px;
  font-size: 14px;
  border-bottom: 1px solid teal;
  display: flex;
  justify-content: flex-start;
}
select {
  height: 30px;
  margin: 0px 5px;
}
input {
  margin: 0px 5px;
  height: 30px;
  font-size: 16px;
}
.display{
  display: none;
}
</style>